<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>进行考试</title>
	<meta name="description" content="Static &amp; Dynamic Tables" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	
	<!-- LOGO -->
	<link rel="icon" type="image/x-icon"  href="${pageContext.request.contextPath}/static/assets/avatars/avatar5.png" />

	<!-- bootstrap & fontawesome -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/font-awesome.min.css" />

	<!-- page specific plugin styles -->

	<!-- text fonts -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-fonts.css" />

	<!-- ace styles -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace.min.css" id="main-ace-style" />

	<!--[if lte IE 9]>
		<link rel="stylesheet" href="../assets/css/ace-part2.min.css" />
	<![endif]-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-skins.min.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace-rtl.min.css" />

	<!--[if lte IE 9]>
	  <link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
	<![endif]-->

	<!-- inline styles related to this page -->

	<!-- ace settings handler -->
	<script src="${pageContext.request.contextPath}/static/assets/js/ace-extra.min.js"></script>

	<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

	<!--[if lte IE 8]>
	<script src="../assets/js/html5shiv.min.js"></script>
	<script src="../assets/js/respond.min.js"></script>
	<![endif]-->
	
	<style>
		.ceshishuoming{ height:45px; background-color:#d7fbfc; margin:30px 0; line-height:45px; padding-left:30px; 
			font-size:15px; border-radius:5px;}
		.biaoti{ height:50px; line-height:100px; font-weight:normal; font-size:26px;color:#989797; text-align:center; 
			border-bottom:1px solid #ddd;}
		.time{ margin-left:43%; font-size:20px; font-weight:bolder; color:#666;}
		.div-1{ padding:0 30px; font-size:15px;}
		.div-2{ border-bottom:1px dashed #ddd; margin-bottom:25px; padding-bottom:10px;}
		.div-3{ padding-bottom:20px;}
		.span-1{ line-height:18px;}
		.span-2{ margin:0 5px;}
		.div-4{ padding:0 20px;color:#999}
		.div-4 ul{ list-style:none;}
		.div-4 ul li{ line-height:40px; padding-left:10px; position:relative;}
		.div-4 ul li:hover{ background-color:#fcfcec;}
		.examBtn{ margin-left:40px;}
		.examBtn button:first-child{ margin-right:25px;}
		.div-1 label{ width:100%; position:absolute; left:0; padding-left:30px; cursor:pointer;}
		.error{ margin-left:30px; padding-left:5px; font-size:14px; background-color:#f5caca; height:25px; 
			line-height:25px; color:#563333;}
		.ok-to-test{ color:#429e57; font-size:20px; margin-left:30px;}
		.no-to-test{ color:#99314c; font-size:20px; margin-left:30px;}
		.examResult{ margin-top:40px; height:50px; line-height:50px; color:#f56378; background-color:#daf7e8; 
			color:#ca576f; font-weight:bolder; padding-left:30px; border-radius:5px;}
	</style>
</head>
<body class="skin-2">
			<div class="main-content">
				<!-- #section:basics/content.breadcrumbs -->
				<div class="breadcrumbs" id="breadcrumbs" style="background-color:#f5f5f5;width:100%;margin:0;paading:0;border-radius:0;border:1px solid #ccc;position:fixed;z-index:999;">
					<script type="text/javascript">
						try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
					</script>

					<ul class="breadcrumb">
						<li>
							<i class="ace-icon fa fa-home home-icon"></i>
							<a href="student">返回主页</a>
						</li>
					</ul><!-- /.breadcrumb -->
					<span class="time"></span>
				</div>

				<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content" style="background-color:#67686d;padding:0;">
					<div class="page-content-area" style="background-color:#fff;width:80%;margin:0 auto;padding:80px 0;">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12 table-responsive" style="padding:0 30px;">
										<div class="biaoti"><!-- 标题 -->
											<h2>${subject.name}测试</h2>
											<input type="hidden" id="subjectId" value="${subject.subId}">
										</div>
										<div class="ceshishuoming"><!-- 测试说明 -->
											本次考试的参考时长为：<b>${subject.totalTime}</b> 分钟   共<b>${subject.testCount}</b>道题   总分为：<b>${subject.totalScore}</b> 分 
										</div>
										<div class="div-1"><!-- 题目区 -->
											<%int i = 1; %>
											<div class="dan"><!-- 单选区 -->
												<c:forEach items="${subject.examTestList}" var="examTest">
													<%int y = 1; %>
													<c:if test="${examTest.testTypeId == 1}">
														<div class="div-2">
															<div class="div-3"><!-- 题干 -->
																<%=i %>、
																<span class="span-1 label label-sm label-pink arrowed-right">
																	<c:if test="${examTest.testTypeId == 1}">单选</c:if>
																	<c:if test="${examTest.testTypeId == 2}">多选</c:if>
																</span>
																<span class="span-2">
																	<c:if test="${examTest.testTypeId == 1}">(1分)</c:if>
																	<c:if test="${examTest.testTypeId == 2}">(2分)</c:if>
																</span>
																<span>${examTest.content}</span>
																<i class="glyphicon glyphicon-ok ok-to-test"></i>
																<i class="glyphicon glyphicon-remove no-to-test"></i>
															 </div><!-- 题干END -->
															 <div class="div-4"><!-- 选项-->
															 	<input type="hidden" value="${examTest.answer}">
																<ul>
																	<li>
																		<span><input name="radio<%=i %>" id="radio<%=i %>-<%=y %>" type="radio" value="A"></span>
																		<label for="radio<%=i %>-<%=y++ %>">
																			<span>A、</span>
																			<span>${examTest.chooseA}</span>
																		</label>
																	</li>
																	<li>
																		<span><input name="radio<%=i %>" id="radio<%=i %>-<%=y %>" type="radio" value="B"></span>
																		<label for="radio<%=i %>-<%=y++ %>">
																			<span>B、</span>
																			<span>${examTest.chooseB}</span>
																		</label>
																	</li>
																	<li>
																		<span><input name="radio<%=i %>" id="radio<%=i %>-<%=y %>" type="radio" value="C"></span>
																		<label for="radio<%=i %>-<%=y++ %>">
																			<span>C、</span>
																			<span>${examTest.chooseC}</span>
																		</label>
																	</li>
																	<li>
																		<span><input name="radio<%=i++ %>" id="radio<%=i %>-<%=y %>" type="radio" value="D"></span>
																		<label for="radio<%=i %>-<%=y++ %>">
																			<span>D、</span>
																			<span>${examTest.chooseD}</span>
																		</label>
																	</li>
																</ul>
															 </div><!-- 选项END-->
															 <div class="error">答案：1213</div>
														</div>
													</c:if>
												</c:forEach>
											</div><!-- 单选区 END-->
											
											<div class="shuang"><!-- 多选区 -->
												<c:forEach items="${subject.examTestList}" var="examTest">
													<%int y = 1; %>
													<c:if test="${examTest.testTypeId == 2}">
														<div class="div-2">
															<div class="div-3"><!-- 题干 -->
																<%=i %>、
																<span class="span-1 label label-sm label-pink arrowed-right">
																	<c:if test="${examTest.testTypeId == 1}">单选</c:if>
																	<c:if test="${examTest.testTypeId == 2}">多选</c:if>
																</span>
																<span class="span-2">
																	<c:if test="${examTest.testTypeId == 1}">(1分)</c:if>
																	<c:if test="${examTest.testTypeId == 2}">(2分)</c:if>
																</span>
																<span>${examTest.content}</span>
																<i class="glyphicon glyphicon-ok ok-to-test"></i>
																<i class="glyphicon glyphicon-remove no-to-test"></i>
															 </div><!-- 题干END -->
															 <div class="div-4"><!-- 选项-->
															 	<input type="hidden" value="${examTest.answer}">
																<ul>
																	<li>
																		<span><input name="checkbox<%=i %>" id="checkbox<%=i %>-<%=y %>" type="checkbox" value="A"></span>
																		<label for="checkbox<%=i %>-<%=y++ %>">
																			<span>A、</span>
																			<span>${examTest.chooseA}</span>
																		</label>
																	</li>
																	<li>
																		<span><input name="checkbox<%=i %>" id="checkbox<%=i %>-<%=y %>" type="checkbox" value="B"></span>
																		<label for="checkbox<%=i %>-<%=y++ %>">
																			<span>B、</span>
																			<span>${examTest.chooseB}</span>
																		</label>
																	</li>
																	<li>
																		<span><input name="checkbox<%=i %>" id="checkbox<%=i %>-<%=y %>" type="checkbox" value="C"></span>
																		<label for="checkbox<%=i %>-<%=y++ %>">
																			<span>C、</span>
																			<span>${examTest.chooseC}</span>
																		</label>
																	</li>
																	<li>
																		<span><input name="checkbox<%=i++ %>" id="checkbox<%=i %>-<%=y %>" type="checkbox" value="D"></span>
																		<label for="checkbox<%=i %>-<%=y++ %>">
																			<span>D、</span>
																			<span>${examTest.chooseD}</span>
																		</label>
																	</li>
																</ul>
															 </div><!-- 选项END-->
															 <div class="error">答案：${examTest.answer}</div>
														</div>
													</c:if>
												</c:forEach>
											</div><!-- 多选区END -->
											<div class="examBtn">
												<button class="btn btn-primary" id="submitBtn">提交</button>
												<button class="btn" id="blackBtn">返回 </button>
											</div>
											<div class="examResult"></div>
											<!-- 确定提交模态框 -->
											<div class="modal fade submitExamModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
											  <div class="modal-dialog" role="document">
											    <div class="modal-content">
											      <div class="modal-header">
											        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
											        <h4 class="modal-title">提示：</h4>
											      </div>
											      <div class="modal-body">
											       	<h4>是否确认提交答卷？</h4>
											      </div>
											      <div class="modal-footer">
													 <button class="btn" data-dismiss="modal" aria-hidden="true">继续答题</button>
													 <button class="btn btn-primary submitExamModalBtn" >确定提交</button>
												  </div>
											    </div>
											  </div>
											</div><!-- 确定提交模态框 END-->
											<!-- 考试结果模态框 -->
											<div id="examResultModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
												<div class="modal-dialog">
													<div class="modal-content">
													  <div class="modal-header">
													    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
													    <h3 id="myModalLabel">考试结果：</h3>
													  </div>
													  <div class="modal-body" style="font-size:16px">
													    
													  </div>
													  <div class="modal-footer">
													    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
													  </div>
													</div>
												</div>
											</div><!-- 考试结果模态框end -->
											
										</div><!-- 题目区END -->
									</div><!-- /.span -->
								</div><!-- /.row -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</div><!-- /.page-content -->
				<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
					<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
				</a>
			</div><!-- /.main-content -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.bootstrap.js"></script>

		<!-- ace scripts -->
		<script src="${pageContext.request.contextPath}/static/assets/js/ace-elements.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace.min.js"></script>

		
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				
				//记时器
				var time = 89; //分钟
				var sss = 60; //秒钟
				var stv = setInterval(timeFun, 1000);
				function timeFun(){
					sss--;
					if(sss >= 10 && time >= 10){
						$(".time").text(time + " : " + sss);
					}else if(sss < 10 && time >= 10){
						$(".time").text(time + " : 0" + sss);
					}else if(sss >= 10 && time < 10){
						$(".time").text("0" + time + " : " + sss);
					}else if(sss < 10 && time < 10){
						$(".time").text("0" + time + " : 0" + sss);
					}
					if(time == 10 && sss == 0){
						alert("10分钟后自动提交答案");
					}
					if(sss == 0 && time != 0){
						time--;
						sss = 60;
					}else if(sss == 0 && time == 0){
						$(".time").html("<i style='color:red'>时间到！</i>");
						clearInterval(stv);
						result("timeOut"); //时间到调用result方法提交(参数的作用是区别点击提交按钮和时间到自动提交，不用要求全部题目要选)
					}
				}
				
				//隐藏提示
				$(".error").hide();
				$(".ok-to-test").hide();
				$(".no-to-test").hide();
				$(".examResult").hide();
				
				//点击提交按钮
				$("#submitBtn").click(function(){
					$(".submitExamModal").modal("show");
				});
				
				//确定提交答卷
				$(".submitExamModal .submitExamModalBtn").click(function(){
					result("submitBtn"); //时间到调用result方法提交(参数的作用是区别点击提交按钮和时间到自动提交，不用要求全部题目要选)
				})
				
				//计算结果方法
				function result(censhu){
					var ID = ""; //记录没选的题号
					var i = 1; //题号标记
					var score = 0; //记录得分
					var studentAnswer = ""; //记录学生答案
					var answer = ""; //记录系统答案
					var dan = 0; //记录单选题总数
					var danToOk = 0; //记录答对的单选题
					var shuang = 0; //记录多选题总数
					var shuangToOk = 0; //记录答对的多选题
					//遍历单选题
					for(var y = 0; y < $(".dan .div-2").length; y++){
						dan++; //记录单选题总数
						//获取学生答案
						 studentAnswer = $(".dan input[name='radio" + i + "']:checked").val();
						if(studentAnswer != null && studentAnswer != ""){ //判断学生答案有没有选
							//获取系统答案
							answer = $($(".dan .div-2")[y]).find("input[type='hidden']").val();
							//console.log(answer + "***" + studentAnswer);
							if(studentAnswer == answer){ //进行答案对比
								danToOk++; //记录答对的单选题
								score++; //答案正确分数加1
								$($(".dan .div-2")[y]).find(".ok-to-test").show(); //答案正确时显示正确提示
							}else{ //答案不正确时显示错误提示
								$($(".dan .div-2")[y]).find(".error").show();
								$($(".dan .div-2")[y]).find(".no-to-test").show();
							}
						}else{
							ID += i + ","; //学生没有选时，记录题号
							if(censhu == "timeOut"){ //自动提交无选项也显示提示
								$($(".dan .div-2")[y]).find(".error").show();
								$($(".dan .div-2")[y]).find(".no-to-test").show();
							}
						}
						i++;
					}
					
					//遍历多选题
					for(var k = 0; k < $(".shuang .div-2").length; k++){
						shuang++; //记录多选题总数
						studentAnswer = "";//获取学生答案
						for(var j = 0; j < $(".shuang input[name='checkbox" + i + "']:checked").length; j++){
							studentAnswer += $($(".shuang input[name='checkbox" + i + "']:checked")[j]).val();
						}
						console.log(studentAnswer);
						if(studentAnswer != null && studentAnswer != ""){
							//获取系统答案
							answer = $($(".shuang .div-2")[k]).find("input[type='hidden']").val();
							console.log("answer:" + answer)
							if(studentAnswer == answer){ //进行答案对比
								shuangToOk++; //记录答对的多选题
								score += 2; //答案正确分数加2
								$($(".shuang .div-2")[k]).find(".ok-to-test").show(); //答案正确时显示正确提示
							}else{ //答案不正确时显示提示
								$($(".shuang .div-2")[k]).find(".error").show();
								$($(".shuang .div-2")[k]).find(".no-to-test").show();
							}
						}else{
							if(censhu == "timeOut"){ //自动提交无选项也显示提示
								$($(".shuang .div-2")[k]).find(".error").show();
								$($(".shuang .div-2")[k]).find(".no-to-test").show();
							}
							ID += i + ","; //学生没有选时，记录题号
						}
						i++;
					}
					//提交数据到后台保存到数据库
					if(censhu == "timeOut" || (censhu == "submitBtn" && ID == "")){
						$.ajax({
							type:"POST",
							url:"saveExamScore",
							dataType:"json",
							data:{
								"score":score,
								"subId":$("#subjectId").val()
							},
							success:function(data){
								if(false == data.success){
									alert("你的考试结果已经提交过，不能再次提交");
									//隐藏提示
									$(".error").hide();
									$(".ok-to-test").hide();
									$(".no-to-test").hide();
									$(".submitExamModal").modal("hide");
								}else{
									clearInterval(stv);
									var str = "";
									str += "消息提示：";
									str += "答对单选题 <b>" + danToOk + "</b> 道，";
									str += "多选 <b>" + shuangToOk + "</b> 道，";
									str += "得分为： <b>" + score + "</b> 分；";
									str += "(总题数为： <b>" + (dan + shuang) + "</b> 道，";
									str += "单选 <b>" + dan + "</b> 道，";
									str += "多选 <b>" + shuang + "</b> 道；";
									str += "总分数为：<b>" + (dan + shuang * 2) + "</b> 分)"; 
									$(".examResult").html(str);
									$(".examResult").show();
									var modalValue = ""; //考试结果模态框内容
									modalValue += "<div>答对单选题数： <b>" + danToOk + "</b>道     (总:<b>" + dan + "</b>道)</div>";
									modalValue += "<div>答对多选题数： <b>" + shuangToOk + "</b>道     (总:<b>" + shuang + "</b>道)</div>";
									modalValue += "<div>得分为： <b>" + score + "分</b></div>";
									modalValue += "<div>考试用时： <b>" + (89 - time) + "分" + (60 - sss) + "秒</b></div>";
									modalValue += "<div style='color:red'>(单选题每题<b>1分</b>；多选题每题<b>2分</b>；科目总分为：<b>" + (dan + shuang * 2) + "</b>)</div>";
									$("#examResultModal .modal-body").html(modalValue); //考试结果模态框
									$(".submitExamModal").modal("hide");
									$("#examResultModal").modal("show");
								}
							}
						})
					}else{
						//隐藏提示
						$(".error").hide();
						$(".ok-to-test").hide();
						$(".no-to-test").hide();
						$(".submitExamModal").modal("hide");
						alert("请完成以下题再提交：" + ID);
					}
					
				}
				
				//返回按钮
				$("#blackBtn").click(function(){
					window.location.href = "student";
				})
				
				var oTable1 = 
				$('#sample-table-2')
				//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
				.dataTable( {
					bAutoWidth: false,
					"aoColumns": [
					  { "bSortable": false },
					  null, null,null, null, null,
					  { "bSortable": false }
					],
					"aaSorting": [],
			
					//,
					//"sScrollY": "200px",
					//"bPaginate": false,
			
					//"sScrollX": "100%",
					//"sScrollXInner": "120%",
					//"bScrollCollapse": true,
					//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
					//you may want to wrap the table inside a "div.dataTables_borderWrap" element
			
					//"iDisplayLength": 50
			    } );
				/**
				var tableTools = new $.fn.dataTable.TableTools( oTable1, {
					"sSwfPath": "../../copy_csv_xls_pdf.swf",
			        "buttons": [
			            "copy",
			            "csv",
			            "xls",
						"pdf",
			            "print"
			        ]
			    } );
			    $( tableTools.fnContainer() ).insertBefore('#sample-table-2');
				*/
			
			
				$(document).on('click', 'th input:checkbox' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			
			});
			$(function () {
			  $('[data-toggle="tooltip"]').tooltip()
			});
			
			
		</script>

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/docs/assets/js/themes/sunburst.css" />

		<script type="text/javascript"> ace.vars['base'] = '..'; </script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace/elements.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace/ace.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/rainbow.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/generic.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/html.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/css.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/javascript.js"></script>
	</body>
</html>